<template>
  <div> 
    <div
      @click="videoAuto(msgData.resource)"
      class="bubble left-bubble bubblt-video over-hidden p0 flex align-center"
    >
      <img
        class="w100 h100"
        :src="msgData.coverPicture"
        alt=""
      >
      <div class="text-white f16 buttle-time">
        {{ MillisecondToDate(msgData.mediaDuration) }}
      </div>
      <div class="buttlt-auto flex flex-center">
        <van-icon
          name="play-circle-o"
          color="#999"
          size="32"
        />
      </div>
    </div>

    <Popup
      v-if="videoShow"
      v-model="videoShow"
      :content-is-show="false"
      class="msg-item"
    >
      <video
        width="320"
        height="200"
        :src="videoUrl"
        autoplay
        controls="controls"
      />
    </Popup>
  </div>
</template>

<script>
import { ref } from 'vue';
import Popup from '@/components/Popup';
export default {
  props: {
    msgData: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    Popup
  },
  setup() {
    const videoShow = ref(false);
    const videoUrl = ref('');

    function videoAuto(url) {
      videoUrl.value = url;
      videoShow.value = true;
    }

    function MillisecondToDate(mss) {
      if (!mss) {
        return;
      }
      let minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
      let seconds = parseInt((mss % (1000 * 60)) / 1000);
      return (minutes || '00') + ':' + (seconds > 10 ? '' : '0') + seconds;
    }
    return {
      videoAuto,
      videoShow,
      videoUrl,
      MillisecondToDate
    };
  }
};
</script>

<style lang="scss" scoped>
.bubble {
  min-height: 72px;
  border-radius: 0 36px 36px 36px;
  overflow: hidden;
}
.bubblt-video {
  width: 200px;
  height: 300px;
  position: relative;
}
.buttle-time {
  position: absolute;
  bottom: 10px;
  right: 20px;
  z-index: 1;
}
.buttlt-auto {
  width: 100%;
  height: 100%;
  background: rgba($color: #000, $alpha: 0.5);
  position: absolute;
}
.flex-end {
  flex-direction: row-reverse;
}
.flex-row-reverse {
  .bubble {
    border-radius: 36px 0 36px 36px !important;
  }
}
</style>